import React, { useContext, useState } from 'react';
import {
  Button,
  Form,
  Grid,
  Input,
  Modal,
  Select,
  Space,
  Switch,
  Typography,
} from '@arco-design/web-react';
import useLocale from '@/utils/useLocale';
import locale from './locale';
import { GlobalContext } from '@/context';
import styles from './style//index.module.less';

import { Violator } from './who';
import { EnumsRes } from '@/api/interface';
import ModalTitle from '@/components/ModalTitle';

const Option = Select.Option;
const TextArea = Input.TextArea;
const { Title } = Typography;
const { Row, Col } = Grid;
const { useForm } = Form;
function WhoCreate({
  visible,
  onVisible,
  onAdd,
  complainantEnums,
  nationalityEnums,
}: {
  visible: boolean;
  onVisible: (status: boolean) => void;
  onAdd: (violator: Violator) => void;
  complainantEnums: Array<EnumsRes>;
  nationalityEnums: Array<EnumsRes>;
}) {
  const t = useLocale(locale);
  const { lang, rtl } = useContext(GlobalContext);
  const [form] = useForm();

  const [formParams, _] = useState<Violator>({
    key: 0,
    concernedParties: '',
    nationality: '',
    role: '',
  });

  const onCreate = () => {
    form.validate((errors, values) => {
      if (!errors) {
        onAdd(values);
        form.resetFields();
      }
    });
  };

  const onCancel = () => {
    form.resetFields();
    onVisible(false);
  };
  return (
    <div>
      <Modal
        title={<ModalTitle title={t['create.violator.witness.title']} />}
        style={{ width: '786px' }}
        visible={visible}
        onCancel={() => onCancel()}
        maskClosable={false}
        unmountOnExit={true}
        footer={null}
        className={rtl ? 'rtl' : ''}
      >
        <div>
          <Form
            form={form}
            labelAlign="left"
            labelCol={{ span: 9 }}
            wrapperCol={{ span: 15 }}
            // initialValues={formParams}
            validateMessages={{
              required: () => t['empty'],
            }}
            validateTrigger="onBlur"
            layout="vertical"
            autoComplete="off"
          >
            <Row gutter={24}>
              <Col span={8}>
                <Form.Item
                  label={t['who.role']}
                  field="role"
                  rules={[{ required: true }]}
                >
                  <Select placeholder={t['who.role.placeholder']} allowClear>
                    {complainantEnums.map((option, index) => (
                      <Option key={index} value={option?.key}>
                        {option.value[lang === 'en-US' ? 'en' : 'ar']}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={t['who.nationality']}
                  field="nationality"
                  rules={[{ required: true }]}
                >
                  <Select
                    showSearch
                    placeholder={t['who.nationality.placeholder']}
                    allowClear
                    filterOption={(inputValue, option) =>
                      option.props.children
                        .toLowerCase()
                        .indexOf(inputValue.toLowerCase()) >= 0
                    }
                  >
                    {nationalityEnums.map((option, index) => (
                      <Option key={index} value={option?.key}>
                        {option.value[lang === 'en-US' ? 'en' : 'ar']}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={t['who.concernedParties']}
                  field="concernedParties"
                  rules={[{ required: true }]}
                >
                  <Input
                    allowClear
                    showWordLimit
                    maxLength={500}
                    onPressEnter={onCreate}
                    placeholder={t['who.concernedParties.placeholder']}
                  />
                </Form.Item>
              </Col>

              <Col span={24}>
                <Space size={24} className={styles['create-button-group']}>
                  <Button
                    type="outline"
                    size="large"
                    onClick={() => onCancel()}
                  >
                    {t['who.cancel']}
                  </Button>
                  <Button
                    type="primary"
                    size="large"
                    onClick={onCreate}
                    loadingFixedWidth
                  >
                    {t['who.add']}
                  </Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    </div>
  );
}

export default WhoCreate;
